<!DOCTYPE html>
<html>
<head>
	<title>测试：注册</title>
</head>
<style type="text/css">
	.register-form{
		margin-top:20;
		border:1px solid #ccc;
		width:400px;
	}
	.blk-item{
		width:100%;
		display: block;
	}
	.mgt-10{
		margin-top:10px;
	}
</style>
<body>
	<h1>注册信息</h1>
	<p class="tips"></p>
	<form name="register-form">
		<label class="blk-item">
			姓名：<input type="text" name="name" class="form-inline"/>
		</label>
		<label class="blk-item">
			电话：<input type="number" name="phone" class="form-inline"/>
		</label>
		<label class="blk-item">
			密码：<input type="password" name="pwd" class="form-inline"/>
		</label>
		<label class="blk-item">
			重复密码：<input type="password" name="r_pwd" class="form-inline"/>
		</label>
		<button type="button" id="cancel">取消</button>
		<button type="button" id="ensure">确定</button>
	</form>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="./ajax.js"></script>
	<script type="text/javascript">
		//确定
		$("#ensure").click(function(){
			var name = $("input[name=name]").val();
			var phone = $("input[name=phone]").val();
			var pwd = $("input[name=pwd]").val();
			var r_pwd = $("input[name=r_pwd]").val();
			var obj = {
				name:name,
				phone:phone,
				pwd:pwd.trim(),
				r_pwd:r_pwd.trim()
			};

			// 表单验证
			if(!tool.checkIsPhone(phone)){
				$(".tips").text("电话号码书写错误");
				return false; // 直接返回，不发送请求
			}
			if(tool.fieldIsNull(name)){
				$(".tips").text("姓名不能为空！");
				return false; // 直接返回，不发送请求
			}
			if(tool.checkPwdIsCorrect(pwd,r_pwd)){
				$(".tips").text("重复密码不正确！");
				return false; // 直接返回，不发送请求
			}
			// 发送请求， f12 的network 可以看到发送的请求的信息，返回的信息
			$.ajax({
				url:"http://localhost/demo.jw/login/test.php",
				dataType:"json",
				data:obj,
				type:"GET",
				success:function(respondData){
					console.log(respondData);  //浏览器控制台打印信息
					if(respondData.status){    // 判断status是1，还是'1',注意的是服务器返回的是字符串，if的参数是字符串话，则会总是true，必须把字符串转为数字，再判断
						$(".tips").text(respondData.message);  //设值
					}
				},
				error:function(errInfo){
					console.log(errInfo);
				}
			});
		});

		var tool ={
			checkIsPhone:function (phone){
				return /^1[3568]\d{9}/.test(phone);
			},
			fieldIsNull:function(text){
				// 检查字符串是否为空
				return !text.trim();
			},
			checkPwdIsCorrect:function(pwd,pwd_repeat){
				return pwd.trim() != pwd_repeat.trim();
			}
		}
	</script>
</body>
</html>